/* tslint:disable:jsx-no-multiline-js */
import PropTypes from 'prop-types';
import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { getComponentLocale } from '../_util/getLocale';


export default class SearchBar extends React.Component{

  static contextTypes = {
    antLocale: PropTypes.object,
  };

  constructor(props) {
    super(props);
    let value;
    if ('value' in props) {
      value = props.value;
    } else if ('defaultValue' in props) {
      value = props.defaultValue;
    } else {
      value = '';
    }
    this.state = {
      value,
      focus: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      this.setState({
        value: nextProps.value,
      });
    }
  }

  onSubmit = () => {
    if (this.props.onSubmit) {
      this.props.onSubmit(this.state.value || '');
    }
  }

  onChangeText = (value: string) => {
    if (!('value' in this.props)) {
      this.setState({ value });
    }
    if (this.props.onChange) {
      this.props.onChange(value);
    }
  }

  onCancel = () => {
    if (this.props.onCancel) {
      this.props.onCancel(this.state.value || '');
    }
  }

  onFocus = () => {
    this.setState({
      focus: true,
    });
    if (this.props.onFocus) {
      this.props.onFocus();
    }
  }

  onBlur = () => {
    this.setState({
      focus: false,
    });
    if (this.props.onBlur) {
      this.props.onBlur();
    }
  }
  render() {
    const {
      showCancelButton,
      value: propsValue,
      cancelText,
      onChangeText,
      onChange,
      onSubmitEditing,
      disabled,
      ...restProps,
    } = this.props;

    const _locale = getComponentLocale(
      this.props,
      this.context,
      'SearchBar',
      () => require('./locale/zh_CN'),
    );

    const { style } = restProps;
    const { value, focus } = this.state;
    const _showCancelButton = showCancelButton || focus;

    return (
      <View style={styles.wrapper}>
        <View style={styles.inputWrapper}>
          <TextInput
            value={value}
            onChangeText={this.onChangeText}
            style={[styles.input, style]}
            editable={!disabled}
            ref={el => ((this.inputRef) = el)}
            onSubmitEditing={this.onSubmit}
            clearButtonMode="always"
            underlineColorAndroid="transparent"
            {...restProps}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
        </View>
        <Image
          source={require('./images/search.png')}
          style={styles.search}
          resizeMode="stretch"
        />
        {_showCancelButton && (
          <View style={styles.cancelTextContainer}>
            <Text style={styles.cancelText} onPress={this.onCancel}>
              {cancelText || _locale.cancelText}
            </Text>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputWrapper: {
    flex: 1,
    flexDirection: 'row',
  },
  input: {
    borderRadius: 5,
    backgroundColor: '#fff',
    borderColor: '#dddddd',
    borderWidth: 0.5,
    height: 28,
    color: '#000000',
    fontSize: 14,
    paddingLeft: 35,
    paddingRight: 35,
    flex: 1,
    paddingTop: 0,
    paddingBottom: 0,
  },
  wrapper: {
    backgroundColor: '#efeff4',
    height: 44,
    paddingLeft: 8,
    paddingRight: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  cancelTextContainer: {
    height: 28,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cancelText: {
    fontSize: 16,
    color: '#108ee9',
    paddingLeft: 15,
  },
  search: {
    tintColor: '#cccccc',
    position: 'absolute',
    left: 8 + 8,
    top: 15,
    width: 15,
    height: 15,
  },
});

